<template>
    <div>
        <div>
            <table-data
                    :ref="tableToolName"
                    :form="formId"
                    :table-data="list"
                    :total="total"
                    :extend-tools="extendHeaders"
                    :show-create="showCreate"
                    :show-edit="showEdit"
                    @on-page-change="handlePageChange"
                    @on-page-size-change="handlePageSizeChange"
                    @on-form-create-click="handlerFormCreate"
                    @on-form-update-click="handlerFormUpdate"
                    @on-delete="handlerItemDelete"
                    @on-filter-event="handleFilterEvent"
                    @before-form-open="handlerItemBeforeFormOpen"
                    :is-show-filter-form="isShowFilterForm"
                    :filter-form-rule="filterFormRule"

                    :customize-create=true
                    @on-open-customize-create="handleOpenCustomizeCreate"
                    @on-update="handleOpenCustomizeUpdate"
                    @on-update-domain="handleOpenCustomizeUpdateDomain"
                    @on-batch-upload-project-code="handleBatchUpdateProjectCode"
                    :check-mini-program-template-visible=true
                    @on-check-mini-program-template="handleCheckMiniProgramTemplate"
                    @on-update-audit-item-list="handleOpenCustomizeUpdateAuditItemList"
                    @on-batch-revert-mini-program-code-release="handleOnBatchRevertMiniProgramCodeRelease"
                    @on-mini-program-operation-record="handleOnShowMiniProgramOperateRecord"
            >
                <template slot="btnGroupExtBtn">
                    <Button type="primary" @click="handleCheckMiniProgramTemplate" style="margin-left: 10px;">检查模板可用性</Button>
                </template>
            </table-data>

            <Modal
                    v-model="customizeCreateVisible"
                    title="新建"
                    :footer-hide=true
                    @on-ok="() => {}">
                <mini-program-template-create @on-close-customize-create="handleCloseCustomizeCreate"
                                         v-if="customizeCreateVisible">
                </mini-program-template-create>
            </Modal>

            <Modal
                    v-model="customizeUpdateVisible"
                    title="更新"
                    :footer-hide=true
                    @on-ok="() => {}">
                <mini-program-template-update @on-close-customize-update="handleCloseCustomizeUpdate"
                                         v-if="customizeUpdateVisible"
                                         :itemData="customizeUpdateData">
                </mini-program-template-update>
            </Modal>

            <Modal
                    v-model="customizeUpdateDomain.visible"
                    title="更新服务器域名或业务域名"
                    :footer-hide=true
                    @on-ok="() => {}">
                <set-domain @on-close-customize-update="handleCloseCustomizeUpdateDomain"
                            @on-get-domain-data="handleUpdateDomain"
                            v-if="customizeUpdateDomain.visible"
                            :id="customizeUpdateDomain.id"
                            :data="customizeUpdateDomain.data">
                </set-domain>
            </Modal>

            <Modal
                    v-model="checkTemplate.visible"
                    title="无法对应的本地代码模板信息"
                    :footer-hide=true
                    @on-ok="() => {}">
                <Table :columns="checkTemplate.columns" :data="checkTemplate.data" :border="checkTemplate.border"></Table>
            </Modal>

            <Modal
                    v-model="customizeUpdateAuditItemList.visible"
                    title="修改审核项列表"
                    :footer-hide=true
                    width="1000"
                    @on-ok="() => {}">
                <jsonConfigObject
                        :key-name="customizeUpdateAuditItemList.name"
                        v-if="customizeUpdateAuditItemList.visible"
                        :json-data="customizeUpdateAuditItemList.data"
                        ref="customizeUpdateAuditItemList"
                >
                </jsonConfigObject>
                <div style="margin-left: 180px">
                    <Button type="primary" @click="handleSubmitUpdateAuditItemList">提交</Button>
                    <Button @click="handleResetUpdateAuditItemList" style="margin-left: 8px">重置</Button>
                </div>
            </Modal>
    
            <!--对应项目操作记录查看-->
            <Modal
                    v-model="miniProgramOperationRecordSetting.visible"
                    :title="miniProgramOperationRecordSetting.title"
                    :footer-hide=false
                    @on-ok="() => {}"
                    width="80%"
            >
                <mini-program-operation-record-page v-if="miniProgramOperationRecordSetting.visible" :mpt-id="miniProgramOperationRecordSetting.mptId"></mini-program-operation-record-page>
            </Modal>

        </div>
    </div>
</template>

<script>
    import {mapState, mapActions} from 'vuex';
    import TableData from '../../table/components/TableData';
    import formconfig from '../../config/form';
    import pageconfig from '../../table/configs/pageconfig';

    import apiService from '../../api/miniProgramTemplate';
    import miniProgramTemplateCreate from './miniProgramTemplateCreate';
    import miniProgramTemplateUpdate from './miniProgramTemplateUpdate';
    import setDomain from "../components/setServerAndWebViewDomainForm";
    import jsonConfigObject from "../components/jsonConfigObject";
    import MiniProgramOperationRecordPage from "./miniProgramOperationRecordPage";

    let formId        = formconfig.MINI_PROGRAM_TEMPLATE_FORM_ID;
    let pageRequestFn = apiService.miniProgramTemplateListPage;
    
    export default {
        name      : 'appProjectListPage',
        components: {
            MiniProgramOperationRecordPage,
            TableData, miniProgramTemplateCreate, miniProgramTemplateUpdate, setDomain, jsonConfigObject
        },
        computed  : {
            ...mapState({}),
        },
        watch     : {
            page(newVal, oldVal) {
                this._setTablePage(newVal);
            },
        },
        methods   : {
            handlePageSizeChange(pageSize) {
                this.page     = 1;
                this.per_page = pageSize;
                this.refreshData();
            },
            handleFilterEvent(conditions) {
                this.conditions = conditions;
                this.page       = 1;
                this.refreshData();
            },
            handlePageChange(page) {
                this.page = page;
                this.refreshData();
            },
            refreshData() {//刷新页面
                this.pageRequestHandler(
                    pageRequestFn({
                        page_info : {
                            page    : this.page,
                            per_page: this.per_page
                        },
                        conditions: this.conditions
                    }),
                    (data) => {
                        //获取列表数据
                        this.list  = data.list;
                        this.total = data.total_count;
                        this._clearSelectNum();
                    }
                );
            },
            handlerFormCreate(data, close) {//新建表单提交，close为关闭表单弹窗函数
            
            },
            handlerFormUpdate(data, id, close) {//更新表单提交,close为关闭表单弹窗函数
            
            },
            handlerItemDelete(data) {//删除条目
                this.popConfirm(
                    () => {
                        this.operatorRequestHandler(
                            apiService.miniProgramTemplateDelete(data.id),
                            () => {
                                this.refreshData();
                            }
                        )
                    },
                );
            },
            _clearSelectNum() {//清空表格选中条目
                this.$refs[this.tableToolName] && (this.$refs[this.tableToolName].selectNum = 0);
            },
            _setTablePage(page) {//设置表格分页
                this.$refs[this.tableToolName] && (this.$refs[this.tableToolName].page = page);
            },
            handlerItemBeforeFormOpen(data, setCustomProps) {//表单打开前的操作，setCustomProps为设置表单中字段额外信息
                //e.g 设置表单字段的额外属性,如图片上传接口，添加token头部信息
                //fixme xinya-table中有个bug,如果设置了头部，则在修改表单中，关于时间的字段都显示为空
                false && data && setCustomProps([
                    {
                        field_name : 'pic_url',//指定字段
                        field_props: {
                            data   : {},//请求附带参数,上传照片附带骑手id
                            headers: {//验证头部
                                Authorization   : '',//this.token
                                Accept          : 'application/vnd.app.v1+json',
                                ContentType     : 'application/json'
                            },
                        }
                    },
                ]);
            },

            //新建表单
            handleOpenCustomizeCreate() {
                this.customizeCreateVisible = true;
            },
            handleCloseCustomizeCreate() {
                this.customizeCreateVisible = false;
                this.page = 1;
                this.refreshData();
                this._clearSelectNum();
            },

            //更新表单
            handleOpenCustomizeUpdate(data) {
                this.customizeUpdateData = data;
                this.customizeUpdateVisible = true;
            },
            handleCloseCustomizeUpdate() {
                this.customizeUpdateData = {};
                this.customizeUpdateVisible = false;
                this.refreshData();
                this._clearSelectNum();
            },

            //修改服务器域名或业务域名
            handleOpenCustomizeUpdateDomain(data) {
                this.customizeUpdateDomain.visible = true;
                this.customizeUpdateDomain.id = data.id;
                this.customizeUpdateDomain.data = {
                    'server_domain': data.server_domain,
                    'webviewdomain': data.webviewdomain
                };
            },
            handleCloseCustomizeUpdateDomain() {
                this.customizeUpdateDomain.visible = false;
                this.customizeUpdateDomain.id = null;
                this.customizeUpdateDomain.data = null;
                this.refreshData();
                this._clearSelectNum();
            },
            handleUpdateDomain(data) {
                this.operatorRequestHandler(
                    apiService.miniProgramTemplateUpdateDomain(this.customizeUpdateDomain.id, data),
                    () => {
                        this.handleCloseCustomizeUpdateDomain();
                    }
                )
            },

            //批量上传代码
            handleBatchUpdateProjectCode(data) {
                this.popConfirm(
                    () => {
                        this.operatorRequestHandler(
                            apiService.miniProgramTemplateBatchUploadProjectCode(data.id),
                            null,
                            null,
                            '批量任务已经执行，请稍后到操作日志中查看',
                        )
                    },
                    '提示',
                    '该操作为对应小程序项目【上传小程序代码并提交审核】，如果项目设置 “审核通过自动发布已通过审核的小程序” 为 “启用”，审核通过后会自动发布已通过审核的小程序，确认该操作吗？'
                )
            },

            //检查模板可用性 检测本地模板对应的微信模板是否存在，若不存在请及时修改对应的微信模板
            handleCheckMiniProgramTemplate() {
                this.popConfirm(
                    () => {
                        this.operatorRequestHandler(
                            apiService.miniProgramTemplateCheck(),
                            (res) => {
                                if (res.data.length > 0) {
                                    this.checkTemplate.visible = true;
                                    this.checkTemplate.data = res.data;
                                } else {
                                    this.$Message.success('不存在无法对应的微信模板')
                                }
                            },
                            null,
                            '',
                        )
                    },
                    '提示',
                    '检测【本地代码模板】对应的【微信模板】是否存在，若不存在请及时修改对应的微信模板！'
                )
            },

            //修改审核项列表
            handleOpenCustomizeUpdateAuditItemList(data) {
                this.customizeUpdateAuditItemList.visible = true;
                this.customizeUpdateAuditItemList.id = data.id;
                this.customizeUpdateAuditItemList.data = data.wx_submit_audit_item_list;
            },
            handleCloseCustomizeUpdateAuditItemList() {
                this.customizeUpdateAuditItemList.visible = false;
                this.customizeUpdateAuditItemList.id = null;
                this.customizeUpdateAuditItemList.data = null;
                this.refreshData();
                this._clearSelectNum();
            },
            handleSubmitUpdateAuditItemList() {
                let data = {
                    'wx_submit_audit_item_list' : this.$refs.customizeUpdateAuditItemList.handleCreateObject()
                };
                this.operatorRequestHandler(
                    apiService.miniProgramTemplateUpdateAuditItemList(this.customizeUpdateAuditItemList.id, data),
                    () => {
                        this.handleCloseCustomizeUpdateAuditItemList();
                    }
                )
            },
            handleResetUpdateAuditItemList() {
                this.$refs.customizeUpdateAuditItemList.handleRemoveAll();
            },
            handleOnBatchRevertMiniProgramCodeRelease(data) {//回退该模板下小程序项目版本
                this.popConfirm(
                    () => {
                        this.operatorRequestHandler(
                            apiService.batchRevertMiniProgramCodeRelease(data.id),
                            (res) => {
                    
                            },
                            null,
                            '操作成功',
                        );
                    },
                    '操作确认',
                    '确认回退对应该模板的小程序项目版本吗？',
                );
            },
            handleOnShowMiniProgramOperateRecord(data){//对应项目操作记录
                this.miniProgramOperationRecordSetting.mptId   = data.id;
                this.miniProgramOperationRecordSetting.visible = true;
                this.miniProgramOperationRecordSetting.title   = `【${data.name}】对应项目操作记录查看`
            },
        },
        data() {
            return {
                formId       : formId,
                extendHeaders: [
                    {
                        name : '修改',//操作名称
                        event: 'on-update',//操作点击事件
                        show : (selectNum, dataInfo) => {//显示操作按钮的条件方法
                            return selectNum === 1;
                        }
                    },
                    {
                        name : '修改服务器域名及业务域名',//操作名称
                        event: 'on-update-domain',//操作点击事件
                        show : (selectNum, dataInfo) => {//显示操作按钮的条件方法
                            return selectNum === 1;
                        }
                    },
                    {
                        name : '修改审核项列表',//操作名称
                        event: 'on-update-audit-item-list',//操作点击事件
                        show : (selectNum, dataInfo) => {//显示操作按钮的条件方法
                            return selectNum === 1;
                        }
                    },
                    {
                        name : '批量上传对应小程序项目代码',//操作名称
                        event: 'on-batch-upload-project-code',//操作点击事件
                        show : (selectNum, dataInfo) => {//显示操作按钮的条件方法
                            return selectNum === 1;
                        }
                    },
                    {
                        name : '回退该模板下小程序项目版本',
                        event: 'on-batch-revert-mini-program-code-release',
                        show : (selectNum, dataInfo) => {
                            return selectNum === 1;
                        }
                    },
                    {
                        name : '对应项目操作记录',
                        event: 'on-mini-program-operation-record',
                        show : (selectNum, dataInfo) => {
                            return selectNum === 1;
                        }
                    },
                    {
                        name : '删除',//操作名称
                        event: 'on-delete',//操作点击事件
                        show : (selectNum, dataInfo) => {//显示操作按钮的条件方法
                            return selectNum === 1;
                        }
                    },
                ],
                showCreate   : false,
                showEdit     : false,
                page         : 1,
                per_page     : pageconfig.DEFAULT_PAGE_SIZE,
                conditions   : [],
                list         : [],
                total        : 0,
                tableToolName: 'tableTool',

                //新建表单
                customizeCreateVisible : false,
                //更新表单
                customizeUpdateVisible : false,
                customizeUpdateData : {},
                //更改服务器域名或业务域名
                customizeUpdateDomain : {
                    visible : false,
                    id      : null,
                    data    : null,
                },
                //检查模板可用性
                checkTemplate: {
                    visible: false,
                    border: true,
                    columns: [
                        {
                            title: 'ID',
                            key: 'id'
                        },
                        {
                            title: '名称',
                            key: 'name'
                        },
                    ],
                    data: [],
                },
                //修改审核项列表
                customizeUpdateAuditItemList : {
                    visible : false,
                    name    : '审核项列表',
                    id      : null,
                    data    : null,
                },

                //过滤表单配置
                isShowFilterForm: true,//是否显示过滤表单
                filterFormRule  : [//过滤表单设置
                    {
                        fieldName  : 'name',//必要配置，过滤字段
                        fieldType  : 'text',//必要配置，表单字段类型
                    },
                    {
                        fieldName  : 'wx_template_id',//必要配置，过滤字段
                        fieldType  : 'text',//必要配置，表单字段类型
                    },
                    {
                        fieldName  : 'remark',//必要配置，过滤字段
                        fieldType  : 'text',//必要配置，表单字段类型
                    },
                    {
                        label      : '创建时间',//可选配置，如果未设置，将会从表格定义的字段中根据fieldName获取
                        fieldName  : 'created_at',//必要配置，过滤字段
                        fieldType  : 'datetimerange',//必要配置，表单字段类型
                        placeholder: '',//可选配置
                        
                        dateFormat: 'yyyy-MM-dd HH:mm:ss',//可选配置，日期格式，默认yyyy-MM-dd HH:mm:ss
                    },
                ],
                //操作记录
                miniProgramOperationRecordSetting: {
                    visible: false,
                    mptId  : null,
                    title  : '',
                },
            }
        },
        created() {
            this.refreshData();
        }
    }
</script>